<template>
    <div>
        <!--查询表单-->
        <div>
            <el-form :inline="true" :model="searchFormData" class="demo-form-inline">
                <el-form-item label="通道">
                    <el-select v-model="searchFormData.channelCode" placeholder="通道名称" size="mini">
                        <el-option v-for="item in channels" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="出售客户id">
                    <el-select v-model="searchFormData.saleCustomerId" placeholder="出售客户id" size="mini">
                        <el-option v-for="item in saleCustomers" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="发货状态">
                    <el-select v-model="searchFormData.status" placeholder="发货状态" size="mini">
                        <el-option v-for="item in status" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchSubmit" size="mini">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格-->
        <el-table :data="tableData" border height="500px" max-height="500px" id="outputRecordList">
            <el-table-column fixed prop="beginId" label="起始id" align="center"/>
            <el-table-column prop="endId" label="结束id" align="center"/>
            <el-table-column prop="cardNum" label="卡数量" align="center"/>
            <el-table-column prop="saleCustomerName" label="出售客户" align="center"/>
            <el-table-column prop="address" label="发货地址" align="center"/>
            <el-table-column prop="status" label="发货状态" align="center"/>
            <el-table-column prop="createTime" label="出库时间" align="center"/>
            <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <el-button @click="sendGood(scope.row)" type="primary" size="mini">发货</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--翻页-->
        <div>
            <pageHelper :current-page="page" :total="total" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange" class="my_pagenation"/>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import pageHelper from '../common/pageHelper'
    import {mytips, getTimeByTimeArray} from '@/module/tools';
    import {Loading} from 'element-ui';

    document.title = '出库记录';
    export default {
        name: 'outputRecordList',
        components: {pageHelper, Loading},
        data() {
            return {
                total: 120,
                page: 1,
                size: 10,
                importDialogFormVisible: false,
                editDialogFormVisible: false,
                formLabelWidth: '80px',
                tableData: [{
                    id: 1,
                    beginId: 100,
                }],
                searchFormData: {
                    channelCode: null,
                    saleCustomerId: null,
                    status: null,
                },
                importFormData: {
                    file: null,
                    channelCode: null,
                    comboCode: null,
                    share: null,
                },
                importRules: {
                    file: [
                        {required: true, message: '请选择文件', trigger: 'change'}
                    ],
                    channelCode: [
                        {required: true, message: '请选择通道', trigger: 'change'}
                    ],
                    comboCode: [
                        {required: true, message: '请选择套餐', trigger: 'change'}
                    ],
                    share: [
                        {required: true, message: '请选择活动区域', trigger: 'change'}
                    ]
                },
                channels: [{label: "通道1", value: 1},
                    {label: "通道2", value: 2},
                    {label: "通道3", value: 3}],
                saleCustomers:
                    [{label: "客户1", value: 1},
                        {label: "客户2", value: 2},
                        {label: "客户3", value: 3}],
                status:
                    [{label: "未发货", value: 0},
                        {label: "已发货", value: 1},
                    ],
                combos:
                    [{label: "未发货", value: 0},
                        {label: "已发货", value: 1},
                    ],
                shares:
                    [{label: "未发货", value: 0},
                        {label: "已发货", value: 1},
                    ],
                editForm: {
                    channelName: '',
                    vendor: '',
                    username: '',
                    password: '',
                    key: '',
                    url: ''
                },
                options: ''
            }
        },
        created() {
        },

        methods: {
            /*翻页跳转处理，传入页数*/
            getData: function (page, size) {
                this.page = page || 1;
                this.size = size || 10;
                let loading = this.$loading(this.options);
                axios({
                    method: 'get',
                    url: API_PATH + '/outStore/query',
                    dataType: 'json',
                    params: {
                        page: this.page,
                        size: this.size,
                        channelCode: this.searchFormData.channelCode,
                        saleCustomerId: this.searchFormData.saleCustomerId,
                        status: this.searchFormData.status
                    }
                }).then(
                    res => {
                        if (res.data.code == 0) {
                            this.tableData = res.data.data.list;
                            this.total = res.data.data.total;
                        }
                    },
                    xhr => {
                    }
                )
                this.$nextTick(() => {
                    console.log('关闭loading');
                    loading.close();
                })
            },
            searchSubmit() {
                this.getData(this.page, this.size);
            },
            sendGood(row) {
                let id = row.id;
                console.log('==发货操作==', row);
                this.$confirm('确认发货?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'post',
                        url: API_PATH + '/outStore/send',
                        dataType: '',
                        params: {
                            id: id,
                        }
                    }).then(res => {
                        if (res.data.code == 0) {
                            alert('发货成功');
                        }
                    }, err => {
                        alert('发货失败');
                    })

                }).catch(() => {
                    alert('取消发货');
                })
            },
            //确认修改
            clearEditForm() {
                this.editForm = {
                    channelName: '',
                    vendor: '',
                    username: '',
                    password: '',
                    key: '',
                    url: ''
                }
            },
            handleSizeChange(size) {
                this.getData(this.page, size);
            },
            handleCurrentChange(page) {
                this.getData(page, this.size);
            },
            importDialogCloseCall() {
                this.$refs[formName].resetFields('ruleForm');
                this.file = null;
                this.importDialogFormVisible = false;
            }
        },
        mounted() {
            this.options = {
                text: '加载中...',
                background: 'rgba(0,0,0,0,1)',
                target: document.getElementById("outputRecordList")
            }
            // this.getData();
        }

    }
</script>

<style scoped>
    .express-ctr-item {
        margin-top: 12px;
    }

    .express-ctr-item .express-ctr-label {
        display: inline-block;
        width: 100px;
        text-align: right;
        line-height: 32px;
    }

    .test {
        width: 100px;
    }

    .file-btn {
        background-color: gray;
        width: 200px;
    }
</style>

